<template>
  <div class="kanban-main-warp animated" style="display: block;" v-loading.body="loading">
    <div class="kanban-main-container content">
      <div class="kanbanCard-main-container">
        <div class="cardList-container-warp">
          <ul class="cardList-container ui-sortable">
            <li class="kanban-card-container list-monday animated" v-for="(item1,index1) in weekList">
              <div class="kanban-card-container">
                <div class="kanban-card-warp">
                  <div class="card-table">
                    <div class="head-tr">
                      <div class="header" style="display: block;">
                        <div class="attr"
                             @dblclick="jumpToOneTask({type:'monthTask',title:'第'+item1.week+'周'+'('+item1.duringTime+')',list:item1.list,key:'due',val:item1.due})">
                          <span>第 {{item1.week}} 周 ({{item1.duringTime}})</span></div>
                      </div>
                      <div class="card-rename" style="display:none;">
                        <input type="text" v-model="addCardItemTitle" placeholder="标题">
                        <span class="btn btn-primary save pull-right" v-loading="addCardItemLoading"
                              @click="addTaskWithDue({'due':item1.due})">保存</span>
                        <div style="clear: both"></div>
                      </div>
                      <i class="icon-add_circle addItem" style="display: inline;top: 12px;"></i></div>
                    <div class="body-tr">
                      <div class="body-tr-container">
                        <div class="kanban-item-warp">
                          <ul class="kanban-item-list">
                            <div class="itemTop"></div>
                            <div class="kanbanItem-add" style="display: none;"><textarea
                              placeholder="任务标题"></textarea><input type="checkbox" name="">
                              <ul style="height:6px"></ul>
                              <span class="btn btn-primary save">创建</span><span
                                class="btn btn-secondary cancel">取消</span>
                              <div style="clear: both"></div>
                            </div>
                            <ul class="list-ul doing ui-sortable allow-detail-click"
                                style="min-height: 100px;width: 100%">
                              <draggable class="dragArea today-task-list" :list="item1.list" tagKey="due"
                                         :tagVal="item1.due" :options="{group:'task'}" @start="dragStart()" @add="dragAdd" @end="dragEnd()">
                                <li class="kanban-Item-container animated tooltipstered"
                                    :class="[item2['tags']&&item2['tags']['need']?'has-need':'',taskStatusClass(item2.state),...checkLevel(item2.tags)]"
                                    v-for="(item2,index2) in item1.list"
                                    :key="item2.id"
                                    :id="item2.id"
                                    tabindex="1"
                                    @keyup.ctrl.up="up(index2,weekList[index1].list)"
                                    @keyup.ctrl.down="down(index2,weekList[index1].list)"
                                    :taskId="item2.id"
                                    draggable="false"
                                    @dblclick="showDetail(item2.id)">
                                  <el-popover
                                    placement="right"
                                    width="500"
                                    trigger="hover"
                                    :open-delay='500'
                                    @show="loadPic(index2,item2)"
                                  >
                                    <div style="text-align: center; margin:0">
                                      <div v-html="templateData"></div>
                                    </div>
                                    <div slot="reference">
                                      <div class="left">
                                        <el-checkbox @change="changeTaskStatusBox(item2)"
                                                     v-model="item2.finished"></el-checkbox>
                                      </div>
                                      <div class="right">
                                        <div class="portrait-container">
                                          <!--<img class="portrait" src="http://cdns.7dtime.com/z39/images/default.jpg" >-->
                                          <!--<div class="time">07-11</div>-->
                                        </div>
                                        <div class="row1">

                                          <span class="kanban-item-title">{{(index2+1)+'.'+item2.title}}</span>
                                          <div class="receive-btn" style="display: none;">领取</div>
                                        </div>
                                        <div class="dateNode node"></div>
                                      </div>
                                    </div>
                                  </el-popover>
                                </li>
                              </draggable>
                            </ul>
                          </ul>
                        </div>
                        <div class="no-task-container" v-show="item1.list.length==0">
                          <img src="../../../static/z39pc/assets/images/no-task.png" alt=""/>
                          <p>点击创建新任务</p>
                          <p>或使用+号创建新任务</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="footer">
                    <div class="bottom" style="display:block">
                      任务 {{item1.finishNum}} / {{item1.list.length}} 评估:{{item1.needTotal}} 耗时:{{item1.usedTotal}}
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <!--<div class="addCard" style="height: 100%; width: 80px; padding-top: 205.8px;">
                        <ul class="addCard-ul">
                            <li><i class="icon-add_circle addItem"></i></li>
                            <li><span>新建</span></li>
                        </ul>
                        <div class="addCard-container">
                            <input type="text" placeholder="卡片名称">
                            <span class="btn btn-primary save">创建</span>
                            <span class="btn btn-secondary cancel">取消</span>
                            <div style="clear: both"></div>
                        </div>
                    </div>-->
        </div>
      </div>
    </div>
    <div class="kanban-main-container" id="taskeditor" style="position:absolute" @keydown.esc="escEditor()"
         tabindex="1">
    </div>
    <div class="task-detail-container" tabindex="1" @keydown.esc="escTaskDetail()">
      <task-detail ref="taskDetailComponent"></task-detail>
    </div>
    <!--<date-line></date-line>-->
  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  import _ from "underscore";
  import moment from "moment";
  import taskDetail from '../../components/task/taskDetail.vue'
  import api from '../../api';
  import {taskAndTag} from "../../common/mixin";
  import {mixinPc} from "../../common/mixinPc";
  import {mixinEditor} from "../../common/mixinEditor";
  import {bus} from "../../common/bus";
  import {
    mapState,
    mapActions
  } from 'vuex';

  export default {
    components: {
      'task-detail': taskDetail,
      draggable
    },
    data() {
      return {
        loading: false,
        templateData: '',
        weekList: [],
        searchDaysStr: '',//时间相同，则不重复请求数据
      };
    },
    mixins: [taskAndTag, mixinPc, mixinEditor],
    computed: {
      ...mapState({
        uid: state => state.vux.uid,
        minDate: state => state.z39.minDate,
        maxDate: state => state.z39.maxDate,
        showMonth: state => state.z39.showMonth,
        taskAll: state => state.z39.taskAll,
        tagDic: state => state.z39.tagDic,
        taskDic: state => state.z39.taskDic,
        tagitems: state => state.z39.tagitems,
        tagitemDic: state => state.z39.tagitemDic,
        days: state => state.z39.days,
        projects: state => state.z39.projects,
        members: state => state.z39.members,
        todayTags: state => state.z39.tagtmps,
        memberDic: state => state.z39.memberDic,
        daySelect: state => state.z39.selectedDayDate,
        filterTaskState: state => state.z39.filterTaskState,
      }),
      getList: function () {
        var _this = this;
        var monthFirstDay = moment(this.showMonth + '-01').format("YYYY-MM-DD")
        var monthLastDay = moment(this.showMonth + '-' + moment(this.showMonth).daysInMonth()).format("YYYY-MM-DD");
        var monthDays = moment(this.showMonth).daysInMonth();
        var firstWeek = moment(monthFirstDay).isoWeek();
        var lastWeek = moment(monthLastDay).isoWeek();
        var weeks = [];
        for (var i = firstWeek; i <= lastWeek; i++) {
          weeks.push(i)
        }
        var dayInWeek = moment(this.daySelect).format('d');//选中的一天在属于周几
        if (this.searchDaysStr != this.showMonth) {
          this.searchDaysStr = this.showMonth;
          this.getTasksList({day: this.showMonth})
          //时间相同，则不重复请求数据
        }

        var weekList = [];
        for (var i = 0; i < weeks.length; i++) {
          //var addDays=(7*i+(i==0?0:1))>monthDays?(monthDays-1):(7*i+(i==0?0:1));//添加日期为每个月的第一天开始，每周递增7天
          var addDays = (7 * i) > monthDays ? (monthDays - 1) : (7 * i)
          var resultDue = moment(monthFirstDay).add(addDays, 'days').format("YYYY-MM-DD");
          var searchDays = [];
          if (moment(resultDue).day() != 0) {//==0为周末
            for (var j = 1; j < 8; j++) {
              searchDays.push(moment(resultDue).days(j).format("YYYY-MM-DD"))//这周中的第几天
            }
          } else {
            for (var j = -6; j < 1; j++) {
              searchDays.push(moment(resultDue).days(j).format("YYYY-MM-DD"))//这周中的第几天
            }
          }
          var duringTime = (moment(searchDays[0]).get('month') + 1) + '.' + moment(searchDays[0]).get('date') + '-' + (moment(searchDays[6]).get('month') + 1) + '.' + moment(searchDays[6]).get('date');
          var obj = {
            week: weeks[i],
            duringTime: duringTime,
            due: resultDue,
            list: this.taskAll.filter(function (task) {
              if (task.tags && task.tags["life"] != undefined) return false;
              if (_this.filterTaskState == '' || _this.filterTaskState == 0) {
                return task.uid == _this.uid && task.parid == null && task.tags && task.tags["due"] && task.tags["due"] && (moment(task.tags["due"]).isoWeek() == weeks[i])
              } else if (_this.filterTaskState == 1) {
                return task.uid == _this.uid && task.parid == null && task.tags && task.tags["due"] && task.tags["due"] && (moment(task.tags["due"]).isoWeek() == weeks[i]) && task.state != 'done' && task.state != 'cancelled'
              } else if (_this.filterTaskState == 2) {
                return task.uid == _this.uid && task.parid == null && task.tags && task.tags["due"] && task.tags["due"] && (moment(task.tags["due"]).isoWeek() == weeks[i]) && task.state == 'done'
              }

            })
          }
          var needTotal = 0;
          var usedTotal = 0;
          obj.finishNum = obj.list.filter(function (task) {
            if (task.tags && task.tags.need) needTotal += parseInt(task.tags.need);
            if (task.tags && (task.tags.used||task.tags.wasted)) usedTotal += getSecond(task.tags.used||task.tags.wasted);
            return task.state && task.state == 'done'
          }).length;
          obj.needTotal = formatUsed(needTotal);
          obj.usedTotal = formatUsed(usedTotal);
          weekList.push(obj)
        }
        this.weekList = weekList;
        Object.assign([], this.weekList, weekList)
        //return weekList
      }
    },
    watch: {
      "taskAll": {
        handler() {
          this.$parent.nones;
          this.getList;
          console.log('all')
        },
        deep: true,
      },
      'showMonth': function () {
        this.getList;
      },
      filterTaskState: function () {
        this.getList;
      }
    },
    methods: {
      dragStart(){
			  this.$parent.dragStart();
      },
      dragEnd(){
        this.$parent.dragEnd();
      },
      daterangeChange(currentDate) {
      },
      loadPic: function (index, desc) {
        this.templateData = desc.title + desc.desc;
      },
      showDetail: function (taskId) {
        //由于会引起闪屏，所以关掉
        //$('.task-detail-container').focus()
        this.$refs.taskDetailComponent.showTaskDetail(taskId)
      },
      trueActive: function (e) {
        e.target.getElementsByClassName('receive-btn')[0].style.display = 'block'
        e.target.getElementsByClassName('receive-btn')[0].style.right = '0'
      },
      falseActive: function (e) {
        e.target.getElementsByClassName('receive-btn')[0].style.display = 'none'
        e.target.getElementsByClassName('receive-btn')[0].style.right = '-75px'
      }
    },
    created() {
    },
    mounted() {
      this.getList;
      bus.$on('toShowTaskDetail', id => {
        console.log("sdfsd")
        this.showDetail(id)
      })
    }
  }
</script>

<style>
  @media screen and (max-height: 1280px) {
    #taskeditor {
      display: none;
      width: calc(100% - 380px) !important;
      margin-right: 5px;
      height: 104% !important;
    }
  }

  @media screen and (max-height: 800px) {
    #taskeditor {
      display: none;
      height: 108% !important;
      margin-top: -22px;
      width: calc(100% - 310px) !important;
      margin-right: 1px;
    }
  }

  .task-main-container li .critical {
    border: 1px solid #1ba4ff;
    border-radius: 5px;
    /*box-shadow: 0px 0px 10px 3px #1ba4ff inset*/
  }
  .task-main-container li .high {
    border: 1px solid #72c7ff;
    border-radius: 5px;
    /*box-shadow: 0px 0px 10px 3px #72c7ff inset*/
  }
  .task-main-container li .low {
    border: 1px solid #f7c3c3;
    border-radius: 5px;
    /*box-shadow: 0px 0px 10px 3px #FF6666 inset*/
  }
  .task-main-container li .minor {
    border: 1px solid red;
    border-radius: 5px;
    /*box-shadow: 0px 0px 10px 3px red inset*/
  }
  .task-main-container li .life {
    border: 1px solid orange;
    border-radius: 5px;
    /*box-shadow: 0px 0px 10px 3px orange inset*/
  }

</style>
